<template>
    <div class="container">
        <div>
            <SideMenu></SideMenu>
        </div>
        <div id="header">
            <i class="fa fa-font katex-editor" @click="katexVisible = true"></i>

            <el-dropdown @command="handleCommand">
                <span
                    >{{ user.username
                    }}<i class="el-icon-caret-bottom el-icon--right"></i
                ></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logout">Logout</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="content-app">
            <transition name="fadeInUp" mode="out-in">
                <router-view></router-view>
            </transition>
            <div class="footer">Build Version: {{ version }}</div>
        </div>

        <el-dialog :title="$t('m.Latex_Editor')" :visible.sync="katexVisible">
            <KatexEditor></KatexEditor>
        </el-dialog>
    </div>
</template>

<script>
import { types } from "@/store"
import { mapGetters } from "vuex"
import SideMenu from "../components/SideMenu.vue"
import KatexEditor from "@admin/components/KatexEditor.vue"
import api from "../api"

export default {
    name: "app",
    data() {
        return {
            version: process.env.VERSION,
            katexVisible: false
        }
    },
    components: {
        SideMenu,
        KatexEditor
    },
    beforeRouteEnter(to, from, next) {
        api.getProfile().then(res => {
            if (!res.data.data) {
                // not login
                next({ name: "login" })
            } else {
                next(vm => {
                    vm.$store.commit(types.CHANGE_PROFILE, {
                        profile: res.data.data
                    })
                })
            }
        })
    },
    methods: {
        handleCommand(command) {
            if (command === "logout") {
                api.logout().then(() => {
                    this.$router.push({ name: "login" })
                })
            }
        }
    },
    computed: {
        ...mapGetters(["user"])
    }
}
</script>

<style lang="less">
a {
    background-color: transparent;
}

a:active,
a:hover {
    outline-width: 0;
}

img {
    border-style: none;
}

.container {
    overflow: auto;
    font-weight: 400;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    background-color: #edecec;
    overflow-y: scroll;
    min-width: 1000px;
}

* {
    box-sizing: border-box;
}

#header {
    text-align: right;
    padding-left: 210px;
    padding-right: 30px;
    line-height: 50px;
    height: 50px;
    background: #f9fafc;
    .screen-full {
        margin-right: 8px;
    }
}

.content-app {
    padding-top: 20px;
    padding-right: 10px;
    padding-left: 210px;
}

.footer {
    margin: 15px;
    text-align: center;
    font-size: small;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(0, 30px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUp-enter-active {
    animation: fadeInUp 0.8s;
}

.katex-editor {
    margin-right: 5px;
    /*font-size: 18px;*/
}
</style>
